<template>
    <!--抽屉组件只为整理-->
    <!-- <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
      open
   </el-button> -->
    <!--使用头像点击的模式-->
    <el-avatar shape="square" :size="100" :src="props.modelValue" @click="drawer = true" >
        <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png">
    </el-avatar>
    <!--抽屉组件只为整理-->
    <el-drawer v-model="drawer" title="I am the title" direction="ttb" size="45%">
        <!--图片上传组件-->
        <el-upload v-model:file-list="fileList" list-type="picture-card" :auto-upload="false" :on-change="onChange">
            <el-icon>
                <Plus />
            </el-icon>

            <template #file="{ file }">
                <div>
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                    <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="getImg(file.url)">
                            <el-icon>
                                <Pointer />
                            </el-icon>
                        </span>
                    </span>
                </div>
            </template>
        </el-upload>
    </el-drawer>
   
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { UploadApi } from '../../api'
const drawer = ref(false)

const fileList = ref([
    {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
])


const onChange = (uploadFile: any, uploadFiles: any) => {
    console.log(uploadFile, uploadFiles)
    // console.log('文件列表：', fileList.value)
    let name = uploadFile.name
    let file = uploadFile.raw
    let reader = new FileReader()
    reader.readAsDataURL(file)
    //加载读取的信息 并提取base64编码
    reader.onload = () => {
        console.log(reader.result);
        callUploadApi(name,reader.result)

    }
}

// const imgurl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')

//定义传递的默认类型 父 -- >子 传递
const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    }
})
// 子通知 父类
const emit = defineEmits(['update:modelValue'])

const getImg = (imageUrl: any) => {
     console.log(imageUrl)
    // imgurl.value = imageUrl
    emit('update:modelValue', imageUrl)
    drawer.value = false
}
// const handlePictureCardPreview = (file:any) => {
//    dialogImageUrl.value = file.url!
//    dialogVisible.value = true
// }


onMounted(() => {
    callUploadImgList()
})

const callUploadImgList = () => { 
    UploadApi.imglist.call().then((res: any) => {
        console.log(res);
        fileList.value=res
})
}

const callUploadApi = (name:String,base64:any) => {
    UploadApi.upload.call({name:name,base64:base64}).then((res:any)=>{
        console.log(res)
    })
}
</script>

<style scoped></style>